<template>
<div>
    <el-pagination
  background
  layout="total,prev, pager, next,jumper"
  :total="total"
  :page-size="pageSize"
  @current-change="currentChange"
  @size-change="sizeChange"
  >
</el-pagination>
        <el-table :data="postlist" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>

    <el-table-column label="缩略图" width='200'>
         <template slot-scope="scope">
          <img class="thumbnail" v-if="scope.row.cover.length > 0" :src="scope.row.cover[0].url" alt="">
          <img class="thumbnail" v-else src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599213618104&di=e69aafdabce4ba65e5c36877c0bb7ae4&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F528a19fc0067d75f192584bf205a0a41.jpeg" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="320"></el-table-column>
      <el-table-column prop="user.nickname" label="笔者" width='200'></el-table-column>

      <el-table-column label="日期" width='200'>
          <template slot-scope="scope">
            {{scope.row.create_date.split('T')[0]}}
          </template>
      </el-table-column>
      <el-table-column label="操作" width='200'>
          <template>
             <el-button type="primary">编辑</el-button>
          </template>
      </el-table-column>
    </el-table>
</div>
</template>
<script>
export default {
      data() {
        return {
         postlist:[],
         total:0,
         pageIndex:1,
         pageSize:2
        }
      },
      created(){
        this.getpost()
      },
      methods:{
          getpost(){
               this.$axios({
              url:'/post',
              params:{
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize
              }      
          }).then(res=>{
              console.log(res);
              this.postlist=res.data.data
              this.total=res.data.total
              console.log(this.postlist);
          })
          },
          sizeChange(newSize){
               this.pageSize= newSize
               this.getpost()
          },
          currentChange(newIndex){
              this.pageIndex = newIndex
              this.getpost()
          }
      }

}
</script>

<style lang="less" scoped>
.thumbnail{
    width: 100px;
    height: 50px;
}
</style>